<script lang="ts">
    import SmsTemplate from './smsTemplate.svelte';
    import LocaleOptions from './localeOptions.svelte';
    import { page } from '$app/stores';
    import { loadSmsTemplate } from './+page.svelte';
    import { baseSmsTemplate, smsTemplate } from './store';
    import { Id } from '$lib/components';
    import { addNotification } from '$lib/stores/notifications';
    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';

    const projectId = $page.params.project;
    let locale = 'en';
    let loading = false;

    async function onLocaleChange() {
        const timeout = setTimeout(() => {
            loading = true;
        }, 1000);
        try {
            const template = await loadSmsTemplate(projectId, 'verification', locale);
            smsTemplate.set(template);
            $baseSmsTemplate = { ...$smsTemplate };
            trackEvent(Submit.SmsChangeLocale, { locale, type: 'verification' });
        } catch (error) {
            trackError(error, Submit.SmsChangeLocale);
            addNotification({
                type: 'error',
                message: error.message
            });
        } finally {
            clearTimeout(timeout);
            loading = false;
        }
    }
</script>

<div class="boxes-wrapper u-margin-block-start-16">
    <LocaleOptions on:select={onLocaleChange} bind:value={locale} />
    <SmsTemplate bind:loading>
        <Id value={'{{team}}'}>{'{{team}}'}</Id>
        <Id value={'{{user}}'}>{'{{user}}'}</Id>
        <Id value={'{{project}}'}>{'{{project}}'}</Id>
        <Id value={'{{redirect}}'}>{'{{redirect}}'}</Id>
    </SmsTemplate>
</div>
